<template>
	<el-container>
		<!-- :style="{ width: isCollapse ? '65px' : '210px' }" -->
		<!-- :width="isCollapse ? '63px' : '200px'" -->
		<el-aside :width="isCollapse ? '63px' : '250px'" class="bg-zinc-200">
			<div class="menu">
				<div class="header-title text-center">
					卡驰
				</div>
				<Menu />
			</div>
		</el-aside>
		<el-container>
			<el-header class="bg-light-300">
				<Header />
			</el-header>
			<Tabs />
			<el-scrollbar class="scrollbar-bgColor">
				<el-main class="self-auto">
					<router-view v-slot="{ Component, route }">
						<transition appear name="fade-transform" mode="out-in">
							<!-- <keep-alive :include="keepAliveStore.keepAliveName"> -->
								<component :is="Component" :key="route.path" v-if="isRouterShow" />
							<!-- </keep-alive> -->
						</transition>
					</router-view>
				</el-main>
			</el-scrollbar>
			<el-footer class="bg-dark-50">
				<Footer />
			</el-footer>
		</el-container>
	</el-container>
</template>

<script setup lang="ts" name="layout">
import Menu from './components/Menu/index.vue'
import Header from './components/Header/index.vue'
import Footer from './components/Footer/index.vue'
import Tabs from './components/Tabs/index.vue'
import { ref, computed } from "vue"

const isRouterShow = ref(true)

import { GlobalStore } from "@/stores/modules/global";
const globalStore = GlobalStore();
const isCollapse = computed(() => globalStore.isCollapse);

</script>

<style lang="scss" scoped>
.header-title {
	line-height: 60px;
	height: 60px;
	background-color: white;
	border-bottom: solid 1px var(--el-menu-border-color);
}
</style>
